<template>
  <span
    class="px-2 py-1 text-sm rounded-full"
    :class="statusClass"
  >
    {{ label }}
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  status: 'active' | 'inactive' | 'pending' | 'blocked'
  label?: string
}

const props = withDefaults(defineProps<Props>(), {
  label: ''
})

const STATUS_CLASSES = {
  active: 'bg-green-100 text-green-800',
  inactive: 'bg-gray-100 text-gray-800',
  pending: 'bg-yellow-100 text-yellow-800',
  blocked: 'bg-red-100 text-red-800'
}

const statusClass = computed(() => STATUS_CLASSES[props.status])
</script> 